import React, { Component, } from 'react';
import { StyleSheet, Text, TextInput, View, } from 'react-native';
import HomeSelector from '../../app/selectors/home';
import * as HomeActions from '../../app/actions/home';
import connect from '../../app/store/connect';
import urls from '../../app/constants/urls';
import Toast from '../../components/Toast'
import { GET, POST, } from '../../commons/utils/request';
import TopCard from '../../components/TopCard/TopCard'

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center'
  },
  phone: {
    width: 320,
    height: 40,
    marginTop: 50,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCode: {
    width: 320,
    height: 40,
    marginTop: 20,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCodeBtn: {
    width: 100,
    height: 20,
    alignContent: 'center',
    alignSelf: 'center',
    textAlign: 'center',
    borderRadius: 6,
    borderColor: '#0091ff',
    borderWidth: 1,
    color: '#0091ff',
  },
  verifyCodeContainer: {
    flexDirection: 'row',
    textDecorationStyle: 'solid',
    textDecorationLine: 'underline',
    lineHeight: 1,
    textDecorationColor: '#0091ff',
  },
  next: {
    width: 320,
    marginTop: 50,
    borderRadius: 5,
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: '#0091ff',
    paddingTop: 10,
    paddingBottom: 10,
  },
});

@connect(HomeSelector, HomeActions)
export default class VerifyPwd extends Component {
  static navigationOptions = {
    headerTitle: '设置登录密码',
  };

  constructor(props) {
    super(props);
    this.state = {
      pwd: '',
      pwdConfirm: '',
    };
  }

  // 设置登录密码
  async setPwd() {
    console.log('TAGGG', '========setPwd======')
    let params = this.props?.navigation?.state?.params
    console.log('TAGGG', '========setPwd===params=====' + JSON.stringify(params))
    const param = {
      checkCode: params.checkCode,
      passwd: this.state.pwd,
      userId: params.userId,
    }
    console.log('TAGG', `===========setPwd===param====${JSON.stringify(param)}`);
    await POST(urls.setPwd, JSON.stringify(param)).then(resp => {
      console.log('TAGGG', `setPwd====resp==${JSON.stringify(resp)}`);
      if(resp && resp.code === 0) {
        console.log('TAGGG', `setPwd====success==${JSON.stringify(resp)}`);
        Toast.show({ title: "设置密码成功, 去绑定邮箱", });
        this.props.navigation.navigate('BindEmail', param);
        // this.props.navigation.navigate('Login', param);
      } else {
        Toast.show({ title: "设置密码失败, " + resp.msg, });
      }
    });
  }

  render() {
    const data ={title: '嗨, 欢迎注册', desc: '设置密码, 登陆更便捷', icon: 'http://120.48.109.211:8088/static/icon/money.png'}
    return (
      <View style={styles.root}>
        <TopCard dataSource= {data}></TopCard>
        <View style ={styles.content}>
          <TextInput
            style={styles.phone}
            placeholder="请输入6-20位数组或字母的登录密码"
            placeholderTextColor="#999999"
            secureTextEntry
            keyboardType="number-pad"
            onChangeText={(pwd) => this.setState({ pwd, })}
          />

          <TextInput
            style={styles.verifyCode}
            placeholder="再次输入登录密码"
            placeholderTextColor="#999999"
            secureTextEntry
            keyboardType="number-pad"
            onChangeText={(pwdConfirm) => this.setState({ pwdConfirm, })}
          />
          <Text
            style={styles.next}
            onPress={() => {
              this.setPwd();
            }}
          >下一步</Text>
        </View>
      </View>
    );
  }
}
